<template>
  <teleport to="body">
    <div v-if="visible" class="modal">
      <div class="modal-content">
        <span class="close" @click="close">&times;</span>
        <h2>申请下架</h2>
        <h2>{{ message.id }}</h2>
        <p>
          本开放平台支持开发者自行申请下架应用，如应用出现问题，可根据实际情况提交下架申请。
        </p>
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          layout="vertical"
          @finish="handleOk"
        >
          <a-form-item
            label="下架方式"
            name="way"
            :rules="[{ required: true, message: '请选择下架方式' }]"
          >
            <a-radio-group v-model:value="formState.way">
              <a-radio value="1">仅下架该版本</a-radio>
              <a-radio value="2">下架该游戏</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="原因描述"
            name="cause"
            :rules="[{ required: true, message: '请输入下架原因' }]"
          >
            <a-textarea
              v-model:value="formState.cause"
              placeholder="请具体描述下架原因"
            />
          </a-form-item>
          <a-form-item
            label="上传截图(格式必须为JPG或PNG)"
            name="screenshot"
            :rules="[{ required: true, message: '请上传截图' }]"
          >
            <a-upload
              v-model:fileList="formState.screenshot"
              list-type="picture-card"
              :max-count="1"
            >
              <div v-if="formState.screenshot.length < 1">
                <PlusOutlined
                  :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }"
                />
              </div>
            </a-upload>
          </a-form-item>
          <div class="form_tips">
            <i class="tips">
              <img
                src="../../assets/icon/icon.png"
                alt=""
                class="imgs"
              />温馨提示</i
            ><br />
            <i>① 提交成功后，游戏自动下架，无需审核等待。</i><br />
            <i
              >②
              若线上版本存在短期无法解决的严重BUG，但旧版本可正常使用，建议申请[仅下架该版本]，系统将自动回退到旧版本，确保新用户能下载到可用的版本。同时，建议开发者及时更新，保证老用户不再因为BUG影响正常使用。</i
            >
          </div>
        </a-form>
        <div class="footer">
          <a-button
            style="
              margin-right: 16px;
              background-color: rgba(76, 200, 126, 1);
              border-radius: 2px;
            "
            type="primary"
            @click="handleOk"
            >确定</a-button
          >
          <a-button style="margin-left: 8px; border-radius: 2px" @click="close"
            >取消</a-button
          >
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref, reactive, defineEmits } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

// Props
const props = defineProps({
  visible: Boolean,
  message: String,
})

// Emits
const emit = defineEmits(['update:visible', 'submit'])

// Reactive form state
const formState = reactive({
  way: '',
  cause: '',
  screenshot: [],
})

// Form rules
const rules = reactive({
  way: [{ required: true, message: '请选择下架方式' }],
  cause: [{ required: true, message: '请输入下架原因' }],
  //   screenshot: [{ required: true, message: '请上传截图' }],
})

// Methods
const close = () => {
  emit('update:visible', false)
}

const formRef = ref()
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState)
      // formRef.value.resetFields();
      // formState.screenshot =[]
      emit('submit', formState)
      emit('update:visible', false)
    })
    .catch(error => {
      console.log('error', error)
    })
}
</script>

<style scoped>
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.form_tips {
  font-size: 14px;
  background: #edfaf1;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 16px;
  padding: 12px;
  color: #6e6e6e;
}
.form_tips i {
  font-style: normal;
}
.tips {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  color: #3c3c3c;
  font-weight: 400;
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px; /* 限制最大宽度 */
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
